<template>
  <div class="main">
    <div class="head">
      <div class="tabls">
        <div class="logo">
          <img src="@/assets/HiLL.png" style="width: 3rem" /><font color="white" size="4">
             &nbsp; Hi邻邻</font
          >
        </div>

        <div
          class="li"
          :class="{ as: index == i }"
          v-for="(t, i) in tabls"
          :key="i"
          @click="click(i)"
        >
          {{ t }}
        </div>
      </div>
      <v-touch @swipeleft="left" @swiperight="right">
        <div class="tablBox" v-if="index == 0" >
          <el-container>
            <el-aside width="200px">
              <Aside />
            </el-aside>
              <el-main>
                <Slideshow /><!--走马灯-->
              </el-main>

          </el-container>
        </div>
        <div class="tablBox" v-if="index == 1">
          <el-col>
            <PostBar />
          </el-col>
        </div>
        <div class="tablBox" v-if="index == 2">
          <el-col>
            <Photo />
          </el-col>
        </div>
        <div class="tablBox" v-if="index == 3">
          <el-col>
            <Family />
          </el-col>
        </div>
        <div class="tablBox" v-if="index == 4">
          <el-col>
            <el-button
              @click="this.$router.push('@/views/Login/LoginFrame')"
            ></el-button>
          </el-col>
        </div>
      </v-touch>
    </div>




  </div>
</template>

<script>
import Family from "./Family.vue";
import Photo from "./Photo.vue";
import PostBar from "./PostBar.vue";
import Slideshow from "./Slideshow.vue";
import Aside from "./Aside.vue";

export default {
  name: "Frame",
  components: {
    Family,
    Photo,
    PostBar,
    Slideshow,
    Aside,
  },

  data() {
    return {
      index: 0,
      oldIndex: 0,
      tabls: ["首页", "贴吧", "我的相册", "我的家庭", "退出登录"],

     
    }
  },

  mounted() {
  },

  methods: {

    left() {
      this.index += 1;
      if (this.index > this.tabls.length - 1) {
        this.index = 0;
      }
    },
    right() {
      this.index -= 1;
      if (this.index < 0) {
        this.index = this.tabls.length - 1;
      }
    },
    click(i) {
      this.index = i;
    },

  },

  created() {},
};
</script>
<style>
.tablBox {
  width: 98%;
  height: 500px;
  margin: 0 auto;
  border: 1px solid #73d19a;
  box-shadow: 1px 1px 1px hsl(145, 68%, 60%);
  border-radius: 5px;
  background-color: #a3d4aa;
}
.tabls {
  width: 98%;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.tabls .logo {
  margin-right: 750px;
  margin-top: 7px;
}
.tabls .li {
  padding: 5px;
  margin: 0 5px;
  font-size: 16px;
}
.tabls .li.as {
  color: #96f1aa;
  border-bottom: 1px solid #86f194;
  box-shadow: 1px 1px 1px rgb(248, 248, 248);
}
.headImg {
  width: 3rem;
  border-radius: 50%; /*圆角 */
}
.item {
  margin-top: 5px;
  margin-right: 20px;
}

.el-aside {
  background-color: #d3dce6;
  color: rgb(250, 246, 246);
  text-align: center;
  line-height: 450px;
}

.el-main {
  background-color: #e9eef3;
  color: rgb(250, 244, 244);
  text-align: center;
  line-height: 150px;
}

.main{
  background-color: #66b373;
}

</style>